<template>
  <el-select v-model="value" style="width: 100%" multiple filterable allow-create default-first-option placeholder="请选择标签" @change="tagSelectChange">
    <el-option v-for="item in tagList" :key="item.tagValue" :label="item.tagValue" :value="item.tagValue" />
  </el-select>
</template>

<script>
import { getRecords } from '@/api/business/common/org/tag'

export default {
  name: 'TagSelect',
  props: {
    selects: {
      type: String,
      required: false,
      default: undefined
    },
    regionId: {
      type: Number,
      required: false,
      default: undefined
    },
    orgId: {
      type: Number,
      required: false,
      default: undefined
    },
    tagType: {
      type: [Number, String],
      required: true
    },
    tagGroup: {
      type: String,
      required: false,
      default: undefined
    }
  },
  data() {
    return {
      value: [],
      tagList: [],
      listQuery: {
        curPage: 1,
        pageSize: 1000,
        tagType: undefined,
        tagGroup: undefined,
        regionId: undefined,
        orgId: undefined
      }
    }
  },
  mounted() {
    if (this.selects) {
      this.value = this.selects.split(',')
    }
    this.listQuery.regionId = this.regionId
    this.listQuery.orgId = this.orgId
    this.listQuery.tagType = this.tagType
    this.listQuery.tagGroup = this.tagGroup

    this.getTags()
  },
  methods: {
    getTags() {
      getRecords(this.listQuery).then((response) => {
        this.tagList = response.list
      })
    },
    tagSelectChange() {
      this.$emit('input', this.value.join(','))
    }
  }
}
</script>

<style scoped>

</style>
